<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            height: 265px;
            width: 256px;
            background-image: url(../img/bg2.png);

            animation-name: test;
            animation-duration: .5s;
            animation-iteration-count: infinite;
            animation-timing-function: steps(5);

            animation-direction: reverse;
            margin: 0 auto;
        }

        @keyframes test {
            from {
                /*margin-left: 0;*/
                background-position: 0 0;
            }
            to {
                /*margin-left: 1280px;*/
                background-position: 1280px 0;
            }
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>